<template>
	<div class="wrap">
		<div class="text">
			<h1 class="title">解决方案</h1>
			<div class="content">{{ title }}</div>
		</div>
		<div class="page_content">
			<h1 @click="changeMethod(1)"><i class="el-icon-arrow-left"></i></h1>
			<div
				class="content_box"
				v-for="(item, index) in methodList"
				:key="index"
				:style="hide"
			>
				<h4 class="box" :class="bgImg[index]">
					<div>{{ item.label }}</div>
					<div>查看详情</div>
				</h4>
			</div>
			<div class="content_box" v-for="item in methodList2" :key="item.id" :style="show">
				<h4 class="box" :class="bgImg[item.id]">
					<div>{{ item.label }}</div>
					<div>查看详情</div>
				</h4>
			</div>
			<h1 @click="changeMethod(2)">
				<i class="el-icon-arrow-right"></i>
			</h1>
		</div>
	</div>
</template>

<script lang="ts" setup>
	import { ref } from "vue";
	let title = ref("通用解决方案");
	let methodList = ref([
		{
			// title:'通用解决方案',
			label: "外网内容管理系统方案",
			url: "@/assets/photo5.jpg",
		},
		{
			label: "外网大数据监控系统方案",
			url: "@/assets/photo5.jpg",
		},
		{
			label: "内部门户系统方案",
			url: "@/assets/photo5.jpg",
		},
		{
			label: "运维监管系统方案",
			url: "@/assets/photo5.jpg",
		},
		{
			label: "大屏幕监管系统方案",
			url: "@/assets/photo5.jpg",
		},
	]);
	let bgImg = ref(["bgImg0", "bgImg1", "bgImg2", "bgImg3", "bgImg4"]);
	let methodList2 = ref([
		{
			id: 0,
			label: "元宇宙",
			url: "@/assets/photo6.jpg",
		},
		{
			id: 1,
			label: "政府",
			url: "@/assets/photo5.jpg",
		},
		{
			id: 2,
			label: "金融",
			url: "@/assets/photo6.jpg",
		},
		{
			id: 3,
			label: "制造",
			url: "@/assets/photo5.jpg",
		},
		{
			id: 4,
			label: "能源",
			url: "@/assets/photo6.jpg",
		},
	]);
	let show = ref<string|undefined>("display:none");
	let hide = ref<string|undefined>(undefined);
	function changeMethod(index : number) {
		console.log("执行了", index);
		if (index == 1) {
			show.value = "display:none";
			title.value = "通用解决方案";
			hide.value = undefined;
		}
		if (index == 2) {
			hide.value = "display:none";
			show.value = undefined;
			title.value = "行业解决方案";
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		height: 100vh;
		background: #f0f4fb;
		display: flex;
		align-items: center;
		flex-direction: column;
		> .text {
			display: flex;
			flex-direction: column;
			align-items: center;
			> .title {
				margin-top: 150px;
			}
			> .content {
				margin: 30px 0px;
			}
		}
		> .page_content {
			width: 1800px;
			// border:1px solid red;
			height: 70%;
			display: flex;
			justify-content: center;
			align-items: center;
			> .content_box {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: flex-start;
				width: 20%;
				height: 50%;
				margin: 0px 5px;
				position: relative;
				> .box {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					width: 100%;
					height: 100%;
					// border:1px solid red;
				}
				.box:hover {
					width: 110%;
					height: 100%;
					position: absolute;
				}
			}
			> .content_box:hover {
				display: flex;
				// border:1px solid red;
				width: 20%;
				height: 80%;
				right: 20px;
				z-index: 999;
			}
		}
	}

	.bgImg0 {
		background: url("@/assets/photo5.jpg");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		color: white;
	}
	.bgImg1 {
		background-image: url("@/assets/photo6.jpg");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		color: white;
	}
	.bgImg2 {
		background-image: url("@/assets/photo5.jpg");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		color: white;
	}
	.bgImg3 {
		background-image: url("@/assets/photo6.jpg");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		color: white;
	}
	.bgImg4 {
		background-image: url("@/assets/photo5.jpg");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		color: white;
	}
</style>
